// init-draggable.js
import { computed, ref, watch, watchEffect, onUnmounted } from 'vue';
import { useDraggable } from '@vueuse/core';

export default function initDraggable(isFullscreen) {
    const modalTitleRef = ref(null);
    let modalWidth = 720; // 根据实际 modal 宽度调整
    let modalHeight = 600; // 根据实际 modal 高度调整

    // 拖动相关状态
    const { x, y, isDragging } = useDraggable(modalTitleRef);
    const startX = ref(0);
    const startY = ref(0);
    const startedDrag = ref(false);
    const transformX = ref(0);
    const transformY = ref(0);
    const preTransformX = ref(0);
    const preTransformY = ref(0);
    const dragRect = ref({
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
    });

    // 窗口 resize 处理函数
    const handleResize = () => {
        const bodyRect = document.body.getBoundingClientRect();
        dragRect.value = {
            left: -transformX.value,
            right: bodyRect.width - modalWidth,
            top: -transformY.value,
            bottom: bodyRect.height - modalHeight,
        };

        // 自动修正位置
        transformX.value = Math.min(
            Math.max(transformX.value, dragRect.value.left),
            dragRect.value.right
        );
        transformY.value = Math.min(
            Math.max(transformY.value, dragRect.value.top),
            dragRect.value.bottom
        );
    };

    // 添加 resize 监听
    window.addEventListener('resize', handleResize);
    // 组件卸载时清理
    onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
    });

    watch([x, y], () => {
        if (!startedDrag.value) {
            startX.value = x.value;
            startY.value = y.value;
            const bodyRect = document.body.getBoundingClientRect();

            // 初始化时获取 modal 实际尺寸
            const modal = document.querySelector('.ant-modal');
            if (modal) {
                const rect = modal.getBoundingClientRect();
                modalWidth = rect.width;
                modalHeight = rect.height;
            }

            dragRect.value = {
                left: -transformX.value,
                right: bodyRect.width - modalWidth,
                top: -transformY.value,
                bottom: bodyRect.height - modalHeight,
            };
            preTransformX.value = transformX.value;
            preTransformY.value = transformY.value;
        }
        startedDrag.value = true;
    });

    watch(isDragging, () => {
        if (!isDragging) {
            startedDrag.value = false;
        }
    });

    // 修改 watchEffect
    watchEffect(() => {
        if (isFullscreen?.value) return; // 全屏时禁用拖拽逻辑

        if (startedDrag.value) {
            const newX = preTransformX.value +
                Math.min(
                    Math.max(dragRect.value.left, x.value),
                    dragRect.value.right
                ) - startX.value;

            const newY = preTransformY.value +
                Math.min(
                    Math.max(dragRect.value.top, y.value),
                    dragRect.value.bottom
                ) - startY.value;

            // 使用 requestAnimationFrame 避免直接修改
            requestAnimationFrame(() => {
                transformX.value = newX;
                transformY.value = newY;
            });
        }
    });
    const transformStyle = computed(() => {
        if (isFullscreen?.value) {
            return {
                transform: 'none',
                left: '0',
                top: '0',
                width: '100%',
                height: '100%'
            }
        }
        return {
            transform: `translate(${transformX.value}px, ${transformY.value}px)`,
            transition: startedDrag.value ? 'none' : 'transform 0.2s'
        }
    });
    return {
        transformStyle,
        modalTitleRef,
        transformX,
        transformY
    };
}
